<template>
  <div class="fashion">
    <div class="title border-bottom">
      <div class="left">时装</div>
      <div class="right">
        <a href="#">
          <span>更多</span>
          <i class="iconfont">&#xe600;</i>
        </a>
      </div>
    </div>
    <div class="content">
      <ul class="content-top">
        <li v-for="item of fashionList.fashTop" :key="item.id">
          <img :src="item.imgUrl" alt="">
        </li>
      </ul>
      <ul class="content-bottom">
        <li v-for="item of fashionList.fashBottom" :key="item.id">
          <img :src="item.imgUrl" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeFashion',
  data () {
    return {
      fashionList: {
        fashTop: [
          {
            id: '001',
            imgUrl: 'http://img2.yidejia.com/8/2019/03/08/12aa7d564372.jpg'
          },
          {
            id: '002',
            imgUrl: 'http://img2.yidejia.com/5/2019/03/08/12aea804da2a.jpg'
          },
          {
            id: '003',
            imgUrl: 'http://img2.yidejia.com/7/2019/03/08/baf23a1b282d.jpg'
          }
        ],
        fashBottom: [
          {
            id: '001',
            imgUrl: 'http://img2.yidejia.com/7/2019/03/08/12b60387a88e.jpg'
          },
          {
            id: '002',
            imgUrl: 'http://img2.yidejia.com/1/2019/03/09/840c36c2c7f.jpg'
          }
        ]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .fashion
    width 100%
    overflow hidden
    height 0
    padding-bottom 87.79%
    margin-top .2rem
    .title
      height .96rem
      line-height .96rem
      background #ffffff
      .left
        float left
        font-size .4rem
        font-weight 400
        &::before
          content ' '
          display inline-block
          width .07rem
          height .42rem
          background $bgColor
          position relative
          top .06rem
          margin 0 .12rem 0 .2rem
      .right
        float right
        font-size .325rem
        margin-right .25rem
        a
          color #9f9f9f
          span
            position: relative
            left .1rem
            top .02rem
          i
            float right
            font-size .65rem
    .content
      .content-top
        height 3.283rem
        display flex
        li
          flex 1
          img
            width 100%
            height 100%
      .content-bottom
        height 2.345rem
        display flex
        li
          flex 1
          img
            width 100%
            height 100%
</style>
